<template>
  <view class="my-page">
    <view class="user-info" @click="tologin">
      <view class="info-avatar">
        <image :src="userInfo?userInfo.avatar:notLoginImg" mode="" class="avatar-img"></image>
      </view>
      <view class="info-title">
        <view>{{userInfo?userInfo.nickname:'登录/注册'}}</view>
        <view v-if="!isExpert">靠谱的文玩鉴定平台</view>
        <view class="title-label" v-else>擅长{{userInfo.expertise}} | 累计鉴定{{userInfo.expert_count}}次</view>
      </view>
      <up-icon name="arrow-right" size="56rpx" color="#999999"></up-icon>
    </view>
    <view class="user-introduce" v-if="isExpert">{{userInfo.desc}}</view>
    <view class="user-order" v-if="isExpert">
      <view class="head-title">
        <view class="title-name">我的鉴定</view>
        <view class="label" @click="onOrderList(0,'expert')">更多<up-icon name="arrow-right" size="28rpx"></up-icon> </view>
      </view>
      <view class="order-list">
        <view class="order-nav" v-for="item,index in ExpertList" :key="index" @click="onOrderList(item.id,'expert')">
          <image :src="item.icon" mode=""></image>
          <view class="order-title">{{item.name}}</view>
        </view>
      </view>
    </view>
    <view class="user-order">
      <view class="head-title">
        <view class="title-name">我的订单</view>
        <view class="label" @click="onOrderList(0,'user')">全部<up-icon name="arrow-right" size="28rpx"></up-icon> </view>
      </view>
      <view class="order-list">
        <view class="order-nav" v-for="item,index in orderList" :key="index" @click="onOrderList(item.id,'user')">
          <image :src="item.icon" mode=""></image>
          <view class="order-title">{{item.name}}</view>
        </view>
      </view>
    </view>
    <view class="user-wallet" @click="onwallet" v-if="isIos">
      <view class="head-title">
        <view class="title-name">我的钱包</view>
        <view class="label">{{isExpert?'收益':'查看'}} <up-icon name="arrow-right" size="28rpx"></up-icon>
        </view>
      </view>
      <view class="wallet-content">
        <view class="wallet-nav" v-show="!isExpert">
          <view class="wallet-title">余额（元）</view>
          <view class="wallet-label">{{userInfo.money}}</view>
        </view>
        <view class="wallet-isExpert" v-show="isExpert">
          <view style="font-size: 28rpx;">￥</view>{{userInfo.coins}}
        </view>
      </view>
    </view>
    <view class="user-other">
      <view class="head-title">
        <view class="title-name">其他功能</view>
      </view>
      <view class="other-list">
        <template v-for="item,index in otherList" :key="index">
          <view class="other-nav" @click="onOther(item.id)">
            <image :src="item.icon" mode=""></image>
            <view class="other-title">{{item.name}}</view>
          </view>
        </template>
      </view>
    </view>
  </view>
  <tab-bar currentSelect="my" @showBottom="show = true"></tab-bar>
  <tab-popup :show.sync="show" :listData="classificationList" @showClose="show = false"
    @release="onrelease"></tab-popup>
</template>

<script setup>
  import {
    info,
    categoryList,
    images
  } from "./api.js"
  import {
    ref,
    reactive,
    nextTick
  } from 'vue'
  import {
    onLoad,
    onShow
  } from '@dcloudio/uni-app'
  const isExpert = ref()
  const userInfo = ref({})
  const classificationList = ref([])
  const isIos = ref(false)
  const orderList = ref([{
    name: "鉴定中",
    icon: "/static/my/icon/identifying.png",
    id: 1
  }, {
    name: "待付款",
    icon: "/static/my/icon/payment.png",
    id: 2
  }, {
    name: "已完成",
    icon: "/static/my/icon/complete.png",
    id: 3
  }, {
    name: "已取消",
    icon: "/static/my/icon/refund.png",
    id: 4
  }])
  const ExpertList = ref([{
    name: "全部鉴定",
    icon: "/static/my/icon/identificationAll.png",
    id: 0
  }, {
    name: "未鉴定",
    icon: "/static/my/icon/identificationNot.png",
    id: 1
  }, {
    name: "已鉴定",
    icon: "/static/my/icon/identificationConfirm.png",
    id: 2
  }])
  const otherList = ref([{
    name: "鉴宝说明",
    icon: "/static/my/icon/describe.png",
    id: 1
  }, {
    name: "邀请好友",
    icon: "/static/my/icon/invite.png",
    id: 4
  }, {
    name: "更多设置",
    icon: "/static/my/icon/set.png",
    id: 3
  }])
  const show = ref(false)
  const notLoginImg = '/static/my/image/notLoginAvatar.png'
  onShow(() => {
    userInfo.value = uni.getStorageSync('user')
    classificationList.value = uni.getStorageSync('classificationList')
    isExpert.value = uni.getStorageSync('userInfo').is_expert === 1 ? true : false
    const token = uni.getStorageSync('userInfo').token ? true : false
    if (token) {
      infoApi()
    }
    uni.getSystemInfo({
      success(res) {
        if (res.osName == 'ios') {
          isIos.value = true
        }
      }
    })
  })
  const infoApi = (async () => {
    const res = await info()
    if (res && res.code === 1) {
      userInfo.value = res.data
      isExpert.value = res.data.is_expert === 1 ? true : false
      if (res.data.is_expert) {
        categoryListApi()
        imagesApi()
      }
      uni.setStorageSync("user", res.data)
    } else {
      uni.showToast({
        title: res.msg,
        icon: "none"
      })
    }
  })

  const categoryListApi = (async () => {
    const res = await categoryList()
    if (res && res.code === 1) {
      uni.setStorageSync("categoryList", res.data)
    } else {
      uni.showToast({
        title: res.msg,
        icon: "none"
      })
    }
  })
  const imagesApi = (async () => {
    const res = await images()
    if (res && res.code == 1) {
      uni.setStorageSync("atlas", res.data)
    }
  })

  function tologin() {
    const token = uni.getStorageSync('userInfo').token
    if (token) {
      uni.navigateTo({
        url: '/pages/my/userInfoPage'
      })
    } else {
      uni.navigateTo({
        url: '/pages/my/loginPage'
      })
    }
  }

  function onOrderList(id, type) {
    const token = uni.getStorageSync('userInfo').token
    if (token) {
      if (type == "expert") {
        uni.navigateTo({
          url: `/pages/my/orderPage/orderListExpert?id=${id}`
        })
      } else {
        uni.navigateTo({
          url: `/pages/my/orderPage/orderListPage?id=${id}`
        })
      }
    } else {
      uni.navigateTo({
        url: '/pages/my/loginPage'
      })
    }
  }

  function onrelease(val) {
    show.value = false
    uni.navigateTo({
      url: `/pages/index/identifyPage/identifyRelease`
    })
  }

  function onwallet() {
    const token = uni.getStorageSync('userInfo').token
    if (token) {
      uni.navigateTo({
        url: '/pages/my/walletPage/index'
      })
    } else {
      uni.navigateTo({
        url: '/pages/my/loginPage'
      })
    }
  }

  function onOther(id) {
    if (id === 1) {
      uni.navigateTo({
        url: '/pages/my/otherFunctionPage/describePage'
      })
    } else if (id === 2) {

    } else if (id === 3) {
      uni.navigateTo({
        url: '/pages/my/otherFunctionPage/setPage'
      })
    } else if (id === 4) {
      const token = uni.getStorageSync('userInfo').token
      if (token) {
        uni.navigateTo({
          url: '/pages/my/invitePage/InvitePage',
        })
      } else {
        uni.navigateTo({
          url: '/pages/my/loginPage'
        })
      }
    }
  }
</script>

<style lang="scss" scoped>
  .my-page {
    height: 100%;
    display: flex;
    flex-direction: column;
    box-sizing: border-box;
    padding: 0 30rpx;
    padding-top: var(--status-bar-height);
    overflow: scroll;
    padding-bottom: 230rpx;

    .user-info {
      margin-top: 88rpx;
      display: flex;
      width: 100%;
      height: 120rpx;
      align-items: center;

      .info-avatar {
        height: 120rpx;
        width: 120rpx;
        border-radius: 50%;

        .avatar-img {
          height: 120rpx;
          width: 120rpx;
          border-radius: 50%;
        }
      }

      .info-title {
        margin-left: 28rpx;
        display: flex;
        flex-direction: column;
        flex: 1;

        :first-child {
          font-size: 40rpx;
          font-weight: 500;
          color: #333;

        }

        :last-child {
          font-size: 26rpx;
          font-weight: 400;
          color: rgba(153, 153, 153, 1);
          margin-top: 8rpx;
        }
      }
    }

    .user-introduce {
      margin-top: 20rpx;
      font-size: 26rpx;
      font-weight: 400;
      color: #666;
      display: -webkit-box;
      -webkit-box-orient: vertical;
      -webkit-line-clamp: 2;
      overflow: hidden;
      text-overflow: ellipsis;

    }

    .user-order {
      width: 100%;
      border-radius: 16rpx;
      background: #FFFFFF;
      margin-top: 40rpx;
      box-sizing: border-box;
      padding: 30rpx;

      .order-list {
        margin-top: 30rpx;
        display: flex;
        justify-content: space-around;

        .order-nav {
          display: flex;
          flex-direction: column;
          align-items: center;

          image {
            width: 64rpx;
            height: 64rpx;

          }

          .order-title {
            font-size: 28rpx;
            font-weight: 400;
            color: #333;
            margin-top: 10rpx;
          }
        }
      }
    }

    .user-wallet {
      width: 100%;
      border-radius: 16rpx;
      background: #FFFFFF;
      margin-top: 24rpx;
      box-sizing: border-box;
      padding: 30rpx;

      .wallet-content {
        display: flex;
        margin-top: 30rpx;

        .wallet-nav {
          border-right: 2rpx solid #EBEBEB;
          display: flex;
          flex-direction: column;
          flex: 1;

          .wallet-title {

            font-size: 28rpx;
            font-weight: 400;
            color: #666;

          }

          .wallet-label {
            font-size: 40rpx;
            font-weight: 400;
            color: #333;

          }
        }

        .wallet-isExpert {
          display: flex;
          align-items: baseline;
          font-size: 40rpx;
          font-weight: 400;
          color: #333;

        }

      }
    }

    .user-other {
      width: 100%;
      border-radius: 16rpx;
      background: #FFFFFF;
      margin-top: 24rpx;
      box-sizing: border-box;
      padding: 30rpx;

      .other-list {
        margin-top: 34rpx;
        display: flex;
        align-items: center;
        justify-content: space-around;

        .other-nav {
          display: flex;
          flex-direction: column;
          align-items: center;

          image {
            height: 64rpx;
            width: 64rpx;
          }

          .other-title {
            font-size: 28rpx;
            font-weight: 400;
            color: #333;
            margin-top: 10rpx;
          }
        }
      }
    }

    .head-title {
      display: flex;
      align-items: center;
      justify-content: space-between;

      .title-name {
        font-size: 34rpx;
        font-weight: 500;
        color: #333;
        position: relative;
        width: max-content;
        z-index: 1;
        display: flex;
      }

      .label {
        font-size: 24rpx;
        font-weight: 400;
        color: rgba(153, 153, 153, 1);
        display: flex;
        align-items: baseline;
      }

      .title-name:before {
        content: "";
        width: 100%;
        height: 16rpx;
        opacity: 0.5;
        background: linear-gradient(90deg, $color 0%, transparent 100%);
        position: absolute;
        bottom: 0;
        left: 0;
        z-index: 0;
      }
    }
  }
</style>